<!--  -->
<template>
    <div class="count-box">
        <section>
            <div class="bH-box">
                <h1>美团是一家科技零售公司</h1>
                <h4>美团以 “零售 + 科技” 的战略践行 ” 帮大家吃得更好，生活更好 ” 的公司使命</h4>
                <div style="color: #0f1925a6;font-size: 14px;">
                    自2010年3月成立以来，美团持续推动服务零售和商品零售在需求侧和供给侧的数字化升级，和广大合作伙伴一起努力为消费者提供品质服务。2018年9月20日，美团在港交所挂牌上市。</div>
                <div style="color: #0f1925a6;font-size: 14px;">美团始终以客户为中心，不断加大在新技术上的研发投入。美团会和大家一起努力，更好承担社会责任，更多创造社会价值。
                </div>
                <h4 style="color: #0f1925a6;font-weight: 500;padding-bottom: 50px;"><i class="bi bi-qr-code"></i>
                    下载美团App</h4>
            </div>
            <div class="m-bh-box">
                <h1>美团是一家科技零售公司</h1>
                <h4>美团以 “零售 + 科技” 的战略 <br> 践行 ” 帮大家吃得更好，生活更好 ” 的公司使命</h4>
                <div>了解更多 <i class="bi bi-chevron-down"></i></div>
            </div>
        </section>
        <section>
            <div class="trends-box">
                <div class="head-box">
                    <h4>最新动态</h4>
                    <div>查看全部 <i class="bi bi-chevron-right"></i></div>
                </div>
                <div class="w-100">
                    <div class="head-one">
                        <div class="left-box">
                            <!-- <img src="../../assets/images/tp-5.png" alt=""> -->
                            <div class="img-box">
                                <img src="../../assets/images/tp-5.png" alt="">
                            </div>
                            <div class="left-box-bm">
                                <h4 class="text-ellipsis" style=" -webkit-line-clamp: 1;">覆盖吃喝玩乐多项服务 美团 “神会员” 全面升级</h4>
                                <div style="margin-bottom: 20px;font-size: 14px; color: #0f1925a6;"
                                    class="text-ellipsis">
                                    美团“神会员”首次覆盖外卖服务、美食团购、酒店住宿、休闲玩乐、变美健康、家庭服务等吃喝玩乐多个品类，为消费者提供更多高性价比服务和权益。</div>
                                <div class="time-box">2024-07-04</div>
                            </div>
                        </div>
                        <div class="rig-box">
                            <!-- <img src="../../assets/images/tp-5.png" alt=""> -->
                            <div class="img-box">
                                <img src="../../assets/images/tp-6.png" alt="">
                            </div>
                            <div class="left-box-bm">
                                <h4 class="text-ellipsis">暑期文旅消费规模环比增长超20% 北京、上海、成都、西安、广州领衔热门目的地</h4>
                                <div style="margin-bottom: 42px; font-size: 14px;color: #0f1925a6;"
                                    class="text-ellipsis">
                                    美团数据显示，近两周，全国文旅消费规模环比增幅超过20%，“说走就走”成为主流出行方式。</div>
                                <div class="time-box">2024-07-12</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-100">
                    <div class="list-box">
                        <div class="item-box" v-for="v in listData" :key="v.id">
                            <div class="img-box">
                                <img :src="v.imgUrl" :alt="v.id + ''">
                            </div>
                            <div class="left-box-bm">
                                <h4 class="text-ellipsis">{{ v.title }}</h4>
                                <div class="dest text-ellipsis">{{ v.dest }}</div>
                                <div class="time-box text-ellipsis">{{ v.time }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="more-box">
                    <div>查看全部 <i class="bi bi-chevron-right"></i></div>
                </div>
            </div>
        </section>
    </div>
</template>

<script lang='ts'>
import { defineComponent, ref } from 'vue';
import imgUrl1 from '../../assets/images/tp-601.png';
import imgUrl2 from '../../assets/images/tp-602.png';
import imgUrl3 from '../../assets/images/tp-603.png';
import imgUrl4 from '../../assets/images/tp-604.png';
import imgUrl5 from '../../assets/images/tp-605.png';
import imgUrl6 from '../../assets/images/tp-606.png';

export default defineComponent({
    name: 'Main-Page',
    setup() {
        const listData = ref([
            {
                id: 1,
                imgUrl: imgUrl1,
                title: '美团买药亮相2024世界流感大会 智能预测流行疾病趋势系统引关注家餐厅上榜 大众点评2024年“必家餐厅上榜 大众点评2024年“必家餐厅上榜 大众点评2024年“必',
                dest: '美团买药受邀参加2024世界流感大会，展示了互联网平台在院外呼吸道传染病应对中的创新举措。',
                time: '2024-07-08'
            },
            {
                id: 2,
                imgUrl: imgUrl2,
                title: '美团潮店IP M Cháo发布2024春夏潮店 16城1721个吃喝玩乐新潮去处入选',
                dest: '美团M Cháo发布2024春夏潮店，覆盖休闲玩乐、餐饮、演出等众多业态。',
                time: '2024-07-05'
            },
            {
                id: 3,
                imgUrl: imgUrl3,
                title: '省钱又省时，超2千万人上美团团购“提前点单、到店秒提”',
                dest: '美团团购正式推出“秒提”服务，率先覆盖茶饮、咖啡等高频消费品类下近40家连锁品牌的8万多个门店。',
                time: '2024-07-02'
            },
            {
                id: 4,
                imgUrl: imgUrl4,
                title: '119城2797家餐厅上榜 大众点评2024年“必吃榜”正式揭晓',
                dest: '6月27日，大众点评2024年“必吃榜”在北京正式揭晓，119座城市及地区2797家餐厅上榜。',
                time: '2024-06-27'
            },
            {
                id: 5,
                imgUrl: imgUrl5,
                title: '美团“骑手友好社区”半年落地12城，多地探索解决骑手进小区难题',
                dest: '12个城市落地“骑手友好社区”，解决骑手进门难、停车难、充电难、就餐难等问题。',
                time: '2024-06-27'
            },
            {
                id: 6,
                imgUrl: imgUrl6,
                title: '杰克琼斯、ONLY超1400家门店入驻美团闪购 即时零售服饰品类高速增长',
                dest: '国际知名时装公司绫致集团和美团闪购达成合作，旗下男装品牌杰克琼斯和女装品牌ONLY入驻美团闪购。',
                time: '2024-06-14'
            },
        ])
        return {
            listData
        }

    }
});
</script>
<style scoped lang="scss">
.count-box {
    background-color: #f7f8f9;

    .bH-box {
        text-align: center;
        background: radial-gradient(circle, #fffad9, #fefdf2);
        padding: 0 50px;

        h1 {
            padding-top: .4375rem;
            font-size: 50px;
        }

        h4 {
            padding: 20px 0;
            font-size: 25px;
            font-weight: 500;
        }

        div {
            text-align: center;
            padding: 10px;
            line-height: 20px;
        }
    }

    .m-bh-box {
        text-align: center;
        background: radial-gradient(circle, #fffad9, #fefdf2);

        h1 {
            padding-top: .4375rem;
            font-size: 25px;
        }

        h4 {
            padding: 20px 0;
            font-size: 14px;
            color: #111925d9;
            font-weight: 400;
            line-height: 25px;
        }

        div {
            padding: 30px;
            color: #111925d9;
            // line-height: 20px;
        }
    }

    .trends-box {
        // padding: 0 .3125rem;
        max-width: 1280px;
        margin: 0 auto;

        .head-box {
            display: flex;
            justify-content: space-between;
            padding: 20px 0;
            align-items: center;

            h4 {
                font-size: 26px;
                font-weight: 500;
            }

            div {
                border-radius: 5px;
                border: 1px solid #ececec;
                padding: 5px;
                width: 100px;
                font-size: 14px;
                text-align: center;
            }

        }

        .head-one {
            display: flex;
            // flex-wrap: wrap;
            // justify-content: space-between;
            cursor: pointer;
            // margin-bottom: 20px;

            .left-box {
                // border: 1px solid;
                width: 66.66%;
                margin-bottom: 20px;
                // box-shadow: 0 4px 12px 0 #eee;
                padding: 0 10px;

                .img-box {
                    width: 100%;
                    height: inherit;
                    // background-image: url('../../assets/images/tp-5.png');
                    // background-repeat: no-repeat;
                    border-radius: 20px 20px 0 0;
                    margin-bottom: -4px;
                    background-size: 100%;
                    background-position: 50% 50%;
                    transition: all 1s;

                    &:hover {
                        background-size: 110%;
                    }

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .left-box-bm {
                    background-color: #fff;
                    padding: 20px;
                    border-radius: 0 0 20px 20px;

                    h4 {
                        font-size: 20px;
                        font-weight: 500;
                        margin-bottom: 10px;
                    }

                    div {
                        line-height: 30px;
                        color: #111925;
                    }
                }
            }

            .rig-box {
                width: 33.33%;
                padding: 0 10px;
                margin-bottom: 20px;
                border-radius: 0 0 20px 20px;

                .img-box {
                    width: 100%;
                    height: inherit;
                    // background-image: url('../../assets/images/tp-6.png');
                    // background-repeat: no-repeat;
                    border-radius: 20px 20px 0 0;
                    margin-bottom: -4px;
                    background-size: 100%;
                    background-position: 50% 50%;
                    transition: all 1s;

                    &:hover {
                        background-size: 110%;
                    }

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .left-box-bm {
                    background-color: #fff;
                    padding: 20px;
                    border-radius: 0 0 20px 20px;

                    h4 {
                        font-size: 20px;
                        font-weight: 500;
                        margin-bottom: 10px;
                    }

                    div {
                        line-height: 20px;
                        color: #111925;
                    }
                }

                &:hover {
                    box-shadow: 0 4px 12px 0 #eee;

                }
            }

        }

        .list-box {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .item-box {
                width: 31.33%;
                margin-bottom: 20px;
                cursor: pointer;
                // padding: 0 12px;

                .img-box {

                    width: 100%;
                    height: inherit;
                    // background-repeat: no-repeat;

                    margin-bottom: -4px;
                    // background-size: 100%;
                    // background-position: 50% 50%;
                    // transition: all 1s;

                    overflow: hidden;
                    border-radius: 20px 20px 0 0;

                    img {
                        width: 100%;
                        height: 100%;

                        /* 给图片添加过渡效果 */
                        transition: all 1s;

                        &:hover {
                            //    width: 110%;
                            //    height: 110%;
                            transform: scale(1.2);
                        }

                    }


                }



                .left-box-bm {
                    background-color: #fff;
                    padding: 20px;
                    border-radius: 0 0 20px 20px;

                    div {
                        line-height: 20px;
                        color: #111925;
                    }

                    h4 {
                        font-size: 20px;
                        font-weight: 500;
                        margin-bottom: 10px;
                    }

                    .dest {
                        font-size: 15px;
                        margin-bottom: 20px;
                        color: #0f1925a6;
                    }

                    .time-box {
                        font-size: 14px !important;
                        color: #0f1925a6;
                    }

                }
            }
        }

        .more-box {
            display: flex;
            justify-content: center;
            padding: 20px 20px 40px;

            div {
                width: 120px;
                text-align: center;
                border-radius: 10px;
                border: 1px solid #eee;
                padding: 10px;
                font-size: 16px;
                font-weight: 500;
                cursor: pointer;
            }
        }

    }
}
</style>